﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>酒店 骡窝窝</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link href="hotelList/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/hotelList/js/tab.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script>

        $(function () {
            //携带参数,进行高级查询
            var params = getParams();
            console.log(params);
            if (params.place) {
                $.get("/areas/" + params.place + "/hotels", {
                    keyword: params.keyword,
                    price: params.price,
                    currentPage: 1,
                    pageSize: 4
                }, function (data) {
                    var dataList = [];
                    var totalPage = 0;
                    $.merge(dataList, data.list);
                    $(".hotels").renderValues({list: dataList}, {
                        shref: function (item, value) {
                            var href = $(item).attr("href") + value;
                            $(item).attr("href", href);
                        }
                    });
                    currentPage += 1;
                    totalPage = data.pages;
                    console.log(totalPage);
                });

                $(window).scroll(function () {
                    //console.log(1);
                    if ($(window).height() + $(window).scrollTop() + 1 >= $(document).height()) {
                        //判断当前页是否小于等于总页数
                        if (currentPage <= totalPage) {
                            $.get("/areas/" + params.place + "/hotels", {
                                keyword: params.keyword,
                                price: params.price,
                                currentPage: 1,
                                pageSize: 4
                            }, function (data) {
                                $.merge(dataList, data.list);
                                $(".hotels").renderValues({list: dataList}, {
                                    shref: function (item, value) {
                                        var href = $(item).attr("href") + value;
                                        $(item).attr("href", href);
                                    }
                                });
                                currentPage += 1;
                            })
                        } else {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '亲.我也是有限度的',
                                autoClose: 2500,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }
                    }
                })
                //没有携带参数,查询全部酒店
            } else {
                //数据渲染
                var dataList = [];
                var currentPage = 1;
                var totalPage = 0;
                $.get("/hotels", {currentPage: currentPage, pageSize: 4}, function (data) {
                    //console.log(data);
                    $.merge(dataList, data.list);
                    $(".hotels").renderValues({list: dataList}, {
                        shref: function (item, value) {
                            var href = $(item).attr("href") + value;
                            $(item).attr("href", href);
                        }
                    });
                    currentPage += 1;
                    totalPage = data.pages;
                    console.log(totalPage);
                });

                //滑动分页
                //分页的条件:屏幕的高度+滑动的高度>=文档的高度
                $(window).scroll(function () {
                    //console.log(1);
                    if ($(window).height() + $(window).scrollTop() + 1 >= $(document).height()) {
                        //判断当前页是否小于等于总页数
                        if (currentPage <= totalPage) {
                            $.get("/hotels", {currentPage: currentPage, pageSize: 4}, function (data) {
                                $.merge(dataList, data.list);
                                $(".hotels").renderValues({list: dataList}, {
                                    shref: function (item, value) {
                                        var href = $(item).attr("href") + value;
                                        $(item).attr("href", href);
                                    }
                                });
                                currentPage += 1;
                            })
                        } else {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '亲.我也是有限度的',
                                autoClose: 2500,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }
                    }
                })

            }
        })
    </script>
</head>
<!--屏幕滚动事件无法触发,修改html与body的高度为自动,宽度为100%即可-->
<style>
    html {
        width: 100%;
        height: auto;
        overflow-x: hidden;
    }

    body {
        text-align: left;
        width: 100%;
        background: #e9dfc7;
        overflow-y: scroll;
    }
</style>
<body>
<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed b-line">
        <!--后退-->
        <a href="/hotelsearching.html" class="aui-navBar-item" style="min-width: 13%; flex: 0 0 13%;">
            <i class="aui-icon icon-return"></i>
        </a>
        <div class="aui-center">
            <span class="aui-center-title" style="font-size:1rem"></span>
        </div>
        <a href="javascript:;" class="aui-navBar-item" style="min-width: 13%; flex: 0 0 13%;">
            <i class="icon icon-news"></i>
        </a>
    </header>
    <div class="nav-search">
        <a href="javascript:history.go(-1);">
            <span><i class="fa fa-chevron-left"></i></span>
        </a>
    </div>
    <section class="aui-scrollView">
        <div class="aui-tab" data-ydui-tab>
            <ul class="tab-nav" style="background: #c8c1c4">
                <li class="tab-nav-item" style="display: none">
                    <span href="javascript:;">热门酒店</span>
                </li>
                <li class="tab-nav-item tab-active" style="right: -114px;background-color: #8d8784">
                    <a href="javascript:;">酒店</a>
                </li>
                <li class="tab-nav-item" style="display: none">
                    <a href="javascript:;">热门酒店</a>
                </li>
            </ul>
            <div class="tab-panel hotels">
                <div class="tab-panel-item tab-active">
                    <!--渲染数据-->
                    <div render-loop="list">
                        <a href="/hotelPage.html?id=" class="aui-flex b-line" render-fun="shref" render-key="list.id">
                            <div class="aui-hotel-img">
                                <img render-src="list.coverUrl" alt="" style="width: 95px">
                            </div>
                            <div class="aui-flex-box">
                                <h2 render-html="list.title"></h2>
                                <p><em class="aui-score" render-html="list.subtitle"></em> 评分:<em
                                        class="aui-h-evaluate" render-html="list.grades"></em></p>
                                <p render-html="list.location"></p>
                                <p>高档型</p>
                                <span class="aui-class-item">
                                        <em render-html="list.typeName"></em>
                                        <em>骡窝窝出品</em>
                                    </span>
                                <div class="aui-hotel-price">
                                    <h2><i>￥</i> <em render-html="list.price"><em>起</em></em></h2>
                                    <button style="background: #c85f68" class="getHotel">预定</button>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="aui-footer aui-footer-fixed">
        <a href="javascript:;" class="aui-tabBar-item aui-tabBar-item-one" style="background: #c8c1c4">
            <span class="aui-tabBar-item-text">主会场</span>
        </a>
        <a href="javascript:;" class="aui-tabBar-item aui-tabBar-item-two" style="background: #c8c1c4">
            <span class="aui-tabBar-item-text">附近优惠</span>
            <span class="aui-hot-icon">
                        <img src="hotelList/picture/hot-icon.png" alt="">
                    </span>
        </a>
        <a href="javascript:;" class="aui-tabBar-item aui-tabBar-item-three" style="background: #c8c1c4">
            <span class="aui-tabBar-item-text">更多</span>
            <span class="aui-hot-icon">
                        <img src="hotelList/picture/top-icon.png" alt="">
                    </span>
        </a>
    </footer>
</section>

</body>
</html>
